/* eslint no-underscore-dangle: 0 */
import React, { Component } from 'react';
import { Table, Pagination, Button, Overlay } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import IceLabel from '@icedesign/label';
import FilterForm from './Filter';
import cookie from 'react-cookies';
import axios from 'axios';
import NavLink from "react-router-dom/es/NavLink";

const sessionid = cookie.load('sessionId');
console.log('sessionId', sessionid);
// axios.post()

// @DataBinder({
//   tableData: {
//     // 详细请求配置请参见 https://github.com/axios/axio
//     url: 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/userShowEvaluateList.do?sessionId=' + sessionid,
//   },
// })
export default class EnhanceTable extends Component {
  static displayName = 'EnhanceTable';

  static defaultProps = {};

  constructor(props) {
    super(props);
    // const sessionId = cookie.load('sessionId');
    // 请求参数缓存
    this.queryCache = {};
    this.state = {
      filterFormValue: {},
      test1: [],
      tabledata: [],
      visible: false,
      moreIndexweightInfo: '',
      moreDate: '',
      moreDepartment: '',
      moreresult: '',
    };
  }

  componentDidMount() {
    this.queryCache.page = 1;
    this.fetchData();
  }

  fetchData = () => {
    axios.post('http://39.105.21.199:8989/IPEvaluation/evaluateManage/userShowEvaluateList.do?sessionId=' + sessionid)
      .then((response) => {
        console.log(response);
        const datat = response.data.data;
        const d = datat.entityList;
        this.setState({ tabledata: d });
      }).catch((error) => {
        console.log(error);
      });
    // this.props.updateBindingData('tableData', {
    //   data: this.queryCache,
    // });
  };

  renderTitle = (value, index, record) => {
    return (
      <div style={styles.titleWrapper}>
        <span style={styles.title}>{record.eDepartment}</span>
      </div>
    );
  };

  editItem = (record, e) => {
    e.preventDefault();
    // TODO: record 为该行所对应的数据，可自定义操作行为
  };
  xiangqing = (index, record) => {
    axios.post('http://39.105.21.199:8989/IPEvaluation/evaluateManage/userShowEvaluateList.do?sessionId=' + sessionid)
      .then((response) => {
        console.log(response);
        const datat = response.data.data;
        const d = datat.entityList;
        const number = index;
        for (let i = 0; i < d.length; i++) {
          if (number === i) {
            console.log('详细数据', d[i]);
            this.setState({ moreDepartment: d[i].eDepartment });
            this.setState({ moreDate: d[i].eDatetime });
            this.setState({ moreIndexweightInfo: d[i].eIndexweightInfo });
            this.setState({ moreresult: d[i].eResult });
          }
        }
      }).catch((error) => {
        console.log(error);
      });
    this.setState({ visible: true });
  };
  onClick() {
    this.setState({ visible: true });
  }
  onClose = reason => {
    // console.log("onRequestClose emit!, reason: ", reason);
    this.setState({
      visible: false
    });
  };

  renderOperations = (value, index, record) => {
    return (
      <div
        className="filter-table-operation"
        style={styles.filterTableOperation}
      >
        <Button onClick={this.xiangqing.bind(this, index, record)} shape="text">
          详情
        </Button>
      </div>
    );
  };

  renderStatus = (value) => {
    return (
      <IceLabel inverse={false} status="default">
        {value}
      </IceLabel>
    );
  };

  changePage = (currentPage) => {
    this.queryCache.page = currentPage;

    // this.fetchData();
  };

  filterFormChange = (value) => {
    console.log('onchange', value);
    this.setState({
      filterFormValue: value,
    });
  };

  filterTable = () => {
    // 合并参数，请求数据
    this.queryCache = {
      ...this.queryCache,
      ...this.state.filterFormValue,
    };
    // const baseurl = 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/userShowEvaluateList.do';
    // const params = new URLSearchParams();
    // params.append('sessionId', sessionid);
    // params.append('uDepartment', this.state.filterFormValue.department);
    // const date = this.state.filterFormValue.date;
    // console.log(this.state.filterFormValue);
    // params.append('startDate', date[0]);
    // params.append('endDate', date[1]);
    // console.log(baseurl + params);
    // axios.post(baseurl + params).then((response) => {
    //   console.log(response);
    //   const data = response.data.data.entityList;
    //   this.setState({ tabledata: data });
    // }).catch((error) => {
    //   console.log(error);
    // });
    const baseurl = 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/userShowEvaluateList.do';
    const data = this.state.filterFormValue;
    // const sessionid = cookie.load('sessionId');
    if (typeof (this.state.filterFormValue.date) === 'undefined') {
      console.log('shijianweikong');
      const params = new URLSearchParams();
      params.append('sessionId', sessionid);
      params.append('uDepartment', this.state.filterFormValue.department);
      axios.post(baseurl, params).then((response) => {
        console.log(response);
        const entityList = response.data.data.entityList;
        console.log('date没填', entityList);
        this.setState({ tabledata: entityList });
        // if (typeof (entityList === 'undefined')) {
        //   this.setState({ tabledata: [] });
        // }
      }).catch((error) => {
        console.log(error);
      });
    }
    if (typeof (this.state.filterFormValue.department) === 'undefined') {
      console.log('leixingweikong', this.state.formValue.department);
      const params = new URLSearchParams();
      params.append('sessionId', sessionid);
      const date = this.state.filterFormValue.date;
      params.append('startDate', date[0]);
      params.append('endDate', date[1]);
      axios.post(baseurl, params).then((response) => {
        console.log(response);
        const entityList = response.data.data.entityList;
        console.log('type没填', entityList);
        this.setState({ tabledata: entityList });
        // if (typeof (entityList === 'undefined')) {
        //   this.setState({ tabledata: [] });
        // }
      }).catch((error) => {
        console.log(error);
      });
    }
    if (typeof (this.state.filterFormValue.department) !== 'undefined' && typeof (this.state.filterFormValue.date) !== 'undefined') {
      const params = new URLSearchParams();
      params.append('sessionId', sessionid);
      params.append('uDepartment', this.state.filterFormValue.department);
      const date = this.state.filterFormValue.date;
      params.append('startDate', date[0]);
      params.append('endDate', date[1]);
      axios.post(baseurl, params).then((response) => {
        console.log(response);
        const entityList = response.data.data.entityList;
        console.log('date-type', entityList);
        this.setState({ tabledata: entityList });
        // if (typeof (entityList === 'undefined')) {
        //   this.setState({ tabledata: [] });
        // }
      }).catch((error) => {
        console.log(error);
      });
    }
    // this.fetchData();
  };

  resetFilter = () => {
    this.setState({
      filterFormValue: {},
    });
  };

  render() {
    const { filterFormValue } = this.state;
    console.log('filter', filterFormValue)
    return (
      <div className="filter-table">
        <IceContainer title="评价筛选">
          <FilterForm
            value={filterFormValue}
            onChange={this.filterFormChange}
            onSubmit={this.filterTable}
            onReset={this.resetFilter}
          />
        </IceContainer>
        <IceContainer>
          <Table
            dataSource={this.state.tabledata}
            isLoading={this.state.tabledata.__loading}
            className="basic-table"
            style={styles.basicTable}
            hasBorder={false}
          >
            <Table.Column
              title="单位信息描述"
              cell={this.renderTitle}
              width={220}
            />
            <Table.Column title="发布用户" dataIndex="uAccount" width={165} />
            <Table.Column
              title="发布时间"
              dataIndex="eDatetime"
              width={150}
            />
            <Table.Column
              title="计算结果"
              dataIndex="eResult"
              width={85}
              cell={this.renderStatus}
            />
            <Table.Column
              title="操作"
              dataIndex="operation"
              width={150}
              cell={this.renderOperations}
            />
          </Table>
          <div style={styles.paginationWrapper}>
            {/*<Pagination*/}
              {/*current={1}*/}
              {/*pageSize={10}*/}
              {/*// total={tableData.total}*/}
              {/*onChange={this.changePage}*/}
            {/*/>*/}
          </div>
          <Overlay
            visible={this.state.visible}
            hasMask
            disableScroll
            align="cc cc"
            safeNode={() => this.refs.target}
            onRequestClose={this.onClose.bind(this)}
          >
            <div>
              <span style={{ color: 'red', fontSize: '30px' }}>评价详细信息</span>
              <div style={{ marginTop: '10px' }}>
                <span style={{ color: 'red', fontSize: '20px' }}>单位名称：</span>
                <span style={{ color: 'red', fontSize: '20px' }}>{this.state.moreDepartment}</span>
              </div>
              <div style={{ marginTop: '10px' }}>
                <span style={{ color: 'red', fontSize: '20px' }}>评价时间：</span>
                <span style={{ color: 'red', fontSize: '20px' }}>{this.state.moreDate}</span>
              </div>
              <div style={{ marginTop: '10px' }}>
                <span style={{ color: 'red', fontSize: '20px' }}>评价结果：</span>
                <span style={{ color: 'red', fontSize: '20px' }}>{this.state.moreresult}</span>
              </div>
              <div style={{ marginTop: '10px' }}>
                <span style={{ color: 'red', fontSize: '20px' }}>评价指标：</span>
                <span style={{ color: 'red', fontSize: '20px' }}>{this.state.moreIndexweightInfo}</span>
              </div>
            </div>
          </Overlay>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  filterTableOperation: {
    lineHeight: '28px',
  },
  operationItem: {
    marginRight: '12px',
    textDecoration: 'none',
    color: '#5485F7',
  },
  titleWrapper: {
    display: 'flex',
    flexDirection: 'row',
  },
  title: {
    marginLeft: '10px',
    lineHeight: '20px',
  },
  paginationWrapper: {
    textAlign: 'right',
    paddingTop: '26px',
  },
};
